---
title: <media-captions-button>
description: Media Captions Button
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-captions-button.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-captions-button>` component is used to toggle captions and subtitles on and off. When turning on captions and subtitles, captions tracks will be preferred over subtitles tracks, but either type will be used.

The contents of the `<media-captions-button>` will update based on the text track media state.
- When *any* captions or subtitles tracks are enabled, the component will display the contents of the `on` slot.
- When *all* captions and subtitles tracks are disabled, the component will display the contents of the `off` slot.

## Default usage

<SandpackContainer
  editorHeight={250}
  html={`<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-button></media-captions-button>
</media-controller>`}
/>

## Customize icons

You can modify the contents of the `<media-captions-button>` component using slots.
This is useful if you'd like to use your own custom captions button instead of the default one provided by media-chrome.

Here's an example of how you can replace the default on and off icons with
<b><u>CC</u></b> and CC. Media Controller also enables captions and subtitles using the `defaultsubtitles` attribute.

<SandpackContainer
  editorHeight={310}
  html={`<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-captions-button>
    <span slot="on"><b><u>CC</u></b></span>
    <span slot="off" style="font-weight: 400;">CC</span>
  </media-captions-button>
</media-controller>`}
/>

Alternatively, if you would like to use a single element you could use the `icon` slot instead. This is useful for creating an animated icon that transitions between states. Here's a basic example that uses CSS to control how it looks.

<SandpackContainer
  height={325}
  active="css"
  html={`<media-controller>
  <video slot="media" playsinline muted crossorigin src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4">
    <track label="English" kind="captions" srclang="en" src='https://media-chrome.mux.dev/examples/vanilla/vtt/en-cc.vtt' />
  </video>
  <media-control-bar>
    <media-captions-button>
      <span class="my-icon" slot="icon">CC</span>
    </media-captions-button>
  </media-control-bar>
</media-controller>`}
css={`.my-icon {
  transition: all .5s;
  font-weight: 400;
  border-radius: 5px;
}

media-captions-button[aria-checked=true] .my-icon {
  font-weight: 700;
  text-decoration: underline;
  color: red;
}
`}
/>

## Styling with attributes

The `<media-captions-button>` doesn't expose any configuration attributes.
However, it will be updated with [Media UI Attributes](#media-ui-attributes) any time the selected caption or subtitle changes.

You can use these attributes to style the button. For example, if there aren't any subtitles, hide the button

```css
media-captions-button:not([mediasubtitleslist]) {
  display: none;
}
```
Or make the background blue if a captions is showing.
```css
media-captions-button[mediasubtitlesshowing] {
  --media-control-background: blue;
}
```
